import React, { useEffect, useState } from "react";
import request from "../../utils/request";
import "./style.scss";
import { Right } from "../../components";
export interface ListState {
  title: string;
  id: string;
  banner: string[];
  children: {
    url: string;
    title: string;
    id: string;
  }[];
}

const Index = () => {
  const [list, setList] = useState<ListState[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);

  const fetchList = async () => {
    const resp = await request.get("/api/list");
    setList(resp.data.data);
  };

  useEffect(() => {
    fetchList();
  }, []);

  if (list.length === 0) {
    return <div>...</div>;
  }

  return (
    <div className="home">
      <div className="left">
        {list.map((v, i) => {
          return (
            <span
              key={v.id}
              className={activeIndex === i ? "active" : ""}
              onClick={() => setActiveIndex(i)}
            >
              {v.title}
            </span>
          );
        })}
      </div>
      <div className="right">
        <Right item={list[activeIndex]}></Right>
      </div>
    </div>
  );
};

export default Index;
